<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:46
 * @Description: 价格产销库存
-->
<template>
  <com-box :title="data.title">
    <template v-slot>
      <div class="nav">
        <div class="box-bar echart-item">
          <div class="jgdb-unit">{{ data.unit }}</div>
          <charts class="line-chart" :params="data.params"></charts>
          <!-- <div class="line-chart" ref="echartsRef"></div> -->
        </div>
      </div>
    </template>
  </com-box>
</template>
<script lang="ts" setup>
import comBox from '@/components/comBox/comBox2.vue'
import {
  defineComponent,
  reactive,
  onMounted,
  onBeforeUnmount,
  ref,
  watch,
  toRefs,
  defineExpose,
  defineEmits
} from 'vue'
import httpRequest from '@/service'
import * as echarts from 'echarts'
const emits = defineEmits(['change'])
const data: any = reactive({
  visible: false,
  title: '',
  unit: '',
  params: {
    loading: true,
    height: '310px',
    forceRedraw: true, // 强制重绘
    map: {},
    options: {
      dataset: {
        dimensions: [],
        source: []
      },
      title: {
        show: true,
        text: '',
        left: '20',
        top: '10',
        textStyle: {
          fontSize: 18,
          fontFamily: 'Microsoft YaHei',
          color: 'rgba(162, 199, 255,1)'
        }
      },
      legend: {
        show: true,
        right: 0,
        top: 0,
        itemWidth: 15,
        width: '70%'
      },
      // 待完善：此处如果注释会导致添加不上axisLabel->fontSize的chartFontSize，因为递归合并时直接赋值xAxis全局配置了
      xAxis: [
        {
          axisLabel: {
            fontSize: 12,
            color: '#fff',
            formatter: function (value: string) {
              return value
              // const srt = value.split('-')
              // return srt[0] + '-' + srt[1]
            }
          }
        }
      ],
      yAxis: [
        {
          splitLine: {
            show: true
          },
          nameTextStyle: {
            color: 'transparent'
          },
          axisLabel: {
            fontSize: 12,
            color: '#fff'
          }
        }
      ],
      grid: {
        top: 35,
        bottom: 5
      },
      series: [
        {
          type: ['bar', 'bar', 'bar'],
          barWidth: '30%',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(23, 69, 141, 0.5)'
          },
          label: {
            show: true,
            textStyle: [
              {
                //数值样式
                fontSize: 16,
                color: 'rgb(1, 251, 244)'
              },
              {
                //数值样式
                fontSize: 16,
                color: 'rgb(250, 112, 45)'
              }
            ]
          },
          itemStyle: {
            color: [
              {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(2, 245, 240, 1)' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(2, 245, 240, 0.5)' // 70% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(2, 245, 240, 0)' // 100% 处的颜色
                  }
                ]
              },
              {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(240, 110, 50, 1)' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(240, 110, 50, 0.5)' // 70% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(240, 110, 50, 0)' // 100% 处的颜色
                  }
                ]
              }
            ]
          },
          areaStyle: {
            opacity: 0
          }
        }
      ]
    },
    event: {}
  },
  getData: () => {
    data.params.loading = true
    httpRequest
      .get({ url: 'M2WSWG' })
      .then((res) => {
        if (res.code == 200 && Object.keys(res.map).length > 0) {
          data.params.map = res.map
          data.params.options.yAxis[0].min = res.min || 0
          data.params.options.yAxis[0].name = res.unit
          data.title = res.title
          data.unit = res.unit
          data.params.options.dataset.dimensions = [
            'name',
            ...Object.keys(res.map)
          ]
          data.params.options.dataset.source = res.data
          data.params.loading = false
        }
      })
      .catch(() => {
        console.log('请求失败')
      })
  }
})
onMounted(() => {
  data.getData()
})
const refreshData = () => {
  data.getData()
}
defineExpose({
  refreshData
})
</script>
<style lang="less" scoped>
.nav {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 5px;
  // background-color: rgba(33, 122, 255, 0.1);
  .echart-item {
    width: 100%;
  }
  .box-bar {
    height: 100%;
    padding: 7px 30px 7px 15px;
    position: relative;
    .jgdb-unit {
      position: absolute;
      font-size: 18px;
      color: rgb(70, 237, 232);
      top: 0;
      left: 7px;
    }
    .jgdb-img {
      position: absolute;
      top: -20px;
      left: 7px;
    }
  }
  ::v-deep(.com-box .slot-box) {
    height: calc(100% - 55px);
  }
}
</style>
